<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">


<style>
    .container{
     background-color:#CCC;
     box-shadow:5px 10px 5px #330099;
    }
</style>

</head>
<body>
  

<p>标签式的导航菜单</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
  </ul>



<br><br><br><br> 
  <div class="container">
    <ul class="nav nav-pills">
        <li class="active"> <a href="">1</a> </li>
        <li> <a href="">2</a></li>
        <li> <a href="">3</a></li>
        <li> <a href="">4</a></li>
        <li> <a href="">5</a></li>
    </ul>
</div>


<br><br><br><br> 
<p>垂直胶囊</p>
  <ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#">home</a></li>
      <li ><a href="#">1</a></li>
      <li ><a href="#">2</a></li>
      <li ><a href="#">3</a></li>
      <li ><a href="#">4</a></li>
  </ul>  

 <br><br><br><br> 

  
<p>两端对齐</p>
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="">home</a></li>
    <li ><a href="">1</a></li>
    <li ><a href="">2</a></li>
    <li ><a href="">3</a></li>
    <li ><a href="">4</a></li>
  </ul>



<p>禁用</p>
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="">home</a></li>
    <li ><a href="">1</a></li>
    <li class="disabled"><a href="">2</a></li>
    <li ><a href="">3</a></li>
    <li ><a href="">4</a></li>
  </ul>


 <br><br><br><br>   
<p>面包屑导航栏</p>
  <ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active"><a href="">十一月</a></li>
  </ul>


 <br><br><br><br> 
<p>下拉列表的标签</p>
    <ul class="nav nav-tabs">
        <li><a href="#">home</a></li>
        <li><a href="#">home1</a></li>
        <li><a href="#">home2</a></li>
        <li><a href="#">home3</a></li>
        <li class="dropdown" >
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Java <span class="caret"></span>
          </a>

          <ul class="dropdown-menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="divider"></li><!-- 相当于一条<hr>的分割线 -->
            <li><a href="#">分离的链接</a></li>
          </ul>
        </li>

        <li><a href="#">home4</a></li>
    </ul>


<br><br><br><br>
<p>带有下拉菜单的胶囊</p>
    
    <ul class="nav nav-pills">
        <li class="active"><a href="">home</a></li>
        <li ><a href="">1</a></li>
        <li ><a href="">2</a></li>
        <li ><a href="">3</a></li>
        
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Java <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Swing</a></li>
            <li><a href="#">jMeter</a></li>
            <li><a href="#">EJB</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
          </ul>
        </li>

    </ul>










 <br><br><br><br>  <br><br><br><br>  <br><br><br><br> 
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>

<!-- <script type="text/javascript">
  var lis = document.getElementsByTagName('li')
  var i=0;

  var clear = function(){
      for(var i=0; i<lis.length;i++){
        lis[i].className = ""
      }
  }


  lis.onclick= function(){
    clear()
    lis[i].className='active'
  }

</script> -->
</body>
</html>